<template>
  <div id="admin-r">
    <div class="set-cherts">
        <div class="top-s">就餐数据</div>
        <div class="admin-con set-con">
            <div class="admin-con-data">
                <div class="admin-con-data-img"><img src="./img/ren.png" /></div>
                <div class="admin-con-data-info">
                    <span class="admin-con-data-span1">就餐人数</span>
                    <span class="admin-con-data-span2">231<i>人</i></span>
                </div>
            </div>
            <div class="admin-con-data">
                <div class="admin-con-data-img"><img src="./img/ben.png" /></div>
                <div class="admin-con-data-info">
                    <span class="admin-con-data-span1">消费数据</span>
                    <span class="admin-con-data-span2">4523.00<i>元</i></span>
                </div> 
            </div>
        </div>
    </div>
    <div class="set-cherts">
        <div class="top-s">宿舍信息</div>
        <div class="set-con">
            <div :style="fontSizeFun" class="admin-l-4-echarts" ref="reachRef"></div>
        </div>
    </div>
    <div class="set-cherts">
        <div class="top-s">会议室信息</div>
        <div class="set-con">
            <div class="tab-s">
                <div class="scroll">
                    <table class="table-1">
                        <tr>
                            <th class="td-1">会议预定信息</th>
                            <th class="td-2">会议状态</th>
                        </tr>
                    </table>
                    <list-scroll class="box" :speed="0.3">
                        <div class="list">
                            <div class="item-s" v-for="(item,index) in dataList" :key="index">
                                <div class="item-s-c td-1" style="padding-left: 15px;"> {{ item.name }} </div>
                                <div v-if="item.start" class="item-s-c td-2" style="color: rgba(0,255,40,0.6);"> {{ item.location }} </div>
                                <div v-else class="item-s-c td-2" style="color: rgba(255,179,0,0.6);"> {{ item.location }} </div>
                            </div>
                        </div>
                    </list-scroll>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ListScroll from "./listScroll"
export default {
  name: 'admin-r',
  data() {
    return {
        dataList: [
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'空闲',start: true,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'空闲',start: true,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室1',location:'空闲',start: true,},
            {name:'会议室1',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'空闲',start: true,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'已预定',start: false,},
            {name:'会议室2',location:'空闲',start: true,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'已预定',start: false,},
            {name:'会议室3',location:'空闲',start: true,},
        ],
    };
  },
  components: { ListScroll },
  
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        that.initCharts()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },
    initCharts(){
        let myChart = ''
        if(this.$refs.reachRef){ myChart = echarts.init(this.$refs.reachRef) }
        window.addEventListener('resize',() => {
            myChart.resize()
        })
        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                show: true,
                top: '4%',
                orient: 'horizontal',
                itemHeight: 10,
                itemWidth: 10,
                data: [
                    {
                        name: '宿舍入住人数',
                        icon: 'rect',
                        textStyle: {
                            color:'#FFFFFF',
                        }
                    },
                    {
                        name: '宿舍入住率',
                        icon: 'line',
                        textStyle: {
                            color:'#FFFFFF',
                        }
                    }
                ],
            },
            grid: {
                left: '3%',
                right: 10,
                bottom: 4,
                top: 30,
                containLabel: true,
                borderColor: 'rgb(61,61,61)'
            },
            xAxis: {
                type: 'category',
                boundaryGap : true,
                // position: 'bottom',
                data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    margin: 10,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,0.06)"
                    }
                },
                splitArea:{
                    show: false,
                    areaStyle:{
                        color: 'rgba(255,255,255,0.04)',
                    }
                },
            },
            yAxis: {
                type: 'value',
                // data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
                min: 0,
                max: 600,
                interval: 300,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                   color: "rgba(255,255,255,1)"
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)"
                    }
                },
                splitArea:{
                    show: false,
                    areaStyle:{
                        color: 'rgba(255,255,255,0.02)',
                    }
                },
            },
            series: [
                {
                    name:'宿舍入住人数',
                    data: [350, 260, 470, 340,530, 410, 470,350, 260, 470, 340,530, 410, 470,410],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00E5FF'
                        }
                    },
                },
                {
                    name: '宿舍入住率',
                    data: [350, 260, 470, 340,530, 410, 470,350, 260, 470, 340,530, 410, 470,410],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: false,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color:'#FFB300',
                        }
                    },
                    lineStyle: {
                        color: '#FFB300',
                    },
                },
            ]
        }
        myChart.setOption(option)
        setTimeout(() => {
            let width = myChart.getWidth()
            if(width && width !== 0){
                let opt = myChart.getOption();
                let grid = opt.grid[0];
                let right = grid.right;
                let left = grid.left;
                right = width*parseFloat(right)/100;
                left = width*parseFloat(left)/100;
                let x = width-left-right;
                option.series[0].label.offset = [x-20,0]
            }
            return option && myChart.setOption(option)
        },200)
    },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#admin-r{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    .set-cherts{
        width: 100%;
        height: 32.7%;
        background: rgba($color: #0F2F5C, $alpha: 0.2);
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            font-style: oblique;
            background: rgba($color: #153863, $alpha: 0.4);
        }
        .admin-l-4-echarts{
            width: 100%;
            height: 100%;
        }
        .admin-con{
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            .admin-con-data{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                border: 1px solid #0061B2;
                width: 90%;
                margin: 20px auto 0 auto;
                .admin-con-data-info{
                    width: 80%;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    .admin-con-data-span1{
                        font-size: 14px;
                    }
                }
                .admin-con-data-img{
                    background: rgba($color: #0082FF, $alpha: 0.4);
                    width: 20%;
                    height: 50px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    img{
                        display: block;
                        width: 30%;
                        margin: auto;
                    }
                }
                .admin-con-data-span2{
                    font-size: 23px;
                    color: #00E5FF;
                    font-weight: bold;
                    margin-left: 10px;
                    i{
                        font-size: 14px;
                        font-weight: normal;
                    }
                }
            }
        }
    }

    .tab-s{
        width: 92%;
        height: 90%;
        margin: 10px auto 0 auto;
        overflow: hidden;
        .table-1{
            position: relative;
            width: 100%;
            text-align: center;
            background: rgba($color: #153863, $alpha: 0.4);
            z-index: 1;
            th{
                text-align: center;
                width: 50%;
            }
        }

        .td-1,.td-2,.td-3{
            // width: 20%;
            height: 30px;
            line-height: 30px;
        }
        .td-4,.td-5{
            width: 20%;
            img{
                width: 20px;
                height: 20px;
                margin-top: 5px;
            }
        }
        .box {
            height: 300px;
            .list {
                width: 100%;
                .item-s {
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
                    color: rgb(21,136,170);
                    table-layout:fixed;
                    border-bottom: 1px solid rgb(21,136,189);
                    .item-s-c{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;
                        width: 50%;
                    }
                }
            }
        }
    }
}
</style>